<template>
	<div>
		<el-card>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>活动设置</el-breadcrumb-item>
				<el-breadcrumb-item>分享活动用户审核</el-breadcrumb-item>
			</el-breadcrumb>


			<el-row class="handle-btn">
				<el-select v-model="statusFlag" placeholder="状态筛选" size="mini" @change="getList" class="mr10">
					<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-row>
			<el-table :data="shopApplyList" border style="width: 100%;margin-top: 10px;" height="690"
				:header-cell-style="{ background: '#409EFF', color: '#FFF' }">
				<!-- <el-table-column type="selection" width="55"></el-table-column> -->
				<el-table-column label="标识" prop="recordId" width="55"></el-table-column>
				<el-table-column label="用户id" prop="userId"></el-table-column>
				<el-table-column label="申请时间" prop="recordTime"></el-table-column>
				<el-table-column label="上传图片">
					<template slot-scope="scope">
						<el-image style="width: 50px;height: 50px" :src="url + 'zhonghui/share/' + scope.row.recordPic"
							fit="cover" :previewSrcList="[
					url + 'zhonghui/share/' + scope.row.recordPic
				]"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="当前状态">
					<template slot-scope="prop">
						<el-tag v-if="prop.row.recordFlag == 0">未审核</el-tag>
						<el-tag v-if="prop.row.recordFlag == 1 || prop.row.recordFlag == 3" type="success">审核通过</el-tag>
						<el-tag v-if="prop.row.recordFlag == 2" type="warning">已驳回</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="是否已抽奖">
					<template slot-scope="prop">
						<el-tag v-if="prop.row.recordChou == 0">未抽奖</el-tag>
						<el-tag v-if="prop.row.recordChou == 1" type="success">已抽奖</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="抽奖时间" prop="chouTime"></el-table-column>
				<el-table-column label="是否已发放奖金">
					<template slot-scope="prop">
						<el-tag v-if="prop.row.recordFlag == 3" type="success">已发放</el-tag>
						<el-tag v-else>未发放</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="抽奖金额" prop="recordMoney">
					<template slot-scope="prop">
						{{ prop.row.recordChou == 1 ? prop.row.recordMoney : '暂未抽奖' }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="prop">
						<el-button type="primary" v-if="prop.row.recordFlag == 0" plain @click="aplay('1', prop.row)"
							size="mini">通过</el-button>
						<el-button type="primary" v-if="prop.row.recordFlag == 0" plain @click="aplay('2', prop.row)"
							size="mini">驳回</el-button>
						<el-button type="primary" plain @click="aplay('3', prop.row)"
							v-if="prop.row.recordFlag == 1 && prop.row.recordChou == 1" size="mini">发放奖金</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-control">
				<el-pagination :page-sizes="[20, 50, 80, 100]" :page-size="shopSize" :current-page="shopPage"
					layout="total, sizes, prev, pager, next, jumper" :total="shopTotal" @size-change="sizeChange"
					@current-change="currentChange"></el-pagination>
			</div>

		</el-card>


		<el-dialog title="驳回" :visible.sync="addDisMemDialogVisible" width="30%">
			<el-form ref="formRef" :model="distributionMember" label-width="100px" class="send-dialog-form">
				<el-form-item label="驳回原因" prop="dm_money">
					<el-input v-model="distributionMember.rebut_reason" clearable></el-input>
				</el-form-item>
			</el-form>
			<div></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelBox">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
import {
	url
} from "network/request";
import {
	getActivityLotteryList, authActivityLottery
} from "network/rechargeRule";

export default {
	data() {
		return {
			url,
			addDisMemDialogVisible: false,
			distributionMember: {
				dm_id: "",
				rebut_reason: "",
			},
			statusOptions: [
				{
					value: -1,
					label: '全部'
				},
				{
					value: 0,
					label: '审核中'
				},
				{
					value: 1,
					label: '已通过'
				},
				{
					value: 2,
					label: '已驳回'
				}
			],
			page: 1,
			size: 20,
			totalCount: 0,
			selectObj: {},
			shopApplyList: [],//中汇门店用户审核列表
			statusFlag: -1,
			shopPage: 1,
			shopSize: 20,
			shopTotal: 0,
		}
	},
	filters: {
		//实付金额
		price(val) {
			return "￥" + val.toFixed(2);
		},
	},
	methods: {



		getList() {
			getActivityLotteryList({
				shopId: sessionStorage.shop_id,
				recordFlag: this.statusFlag,
				page: this.shopPage,
				size: this.shopSize,
			})
				.then(res => {
					console.log(res);
					this.shopApplyList = res.data.list
					this.shopTotal = res.data.total

					console.log(this.shopApplyList);
				})
				.catch(err => { });
		},
		cancelBox() {
			this.$refs.formRef.resetFields();
			this.addDisMemDialogVisible = false;
		},
		submitForm() {
			if ((this.distributionMember.rebut_reason) == "") {
				return this.$message.warning("输入的驳回原因");
			}
			this.$refs.formRef.validate(valid => {
				authActivityLottery({
					recordId: this.selectObj.recordId,
					recordFlag: 2,
					rejectNote: this.distributionMember.rebut_reason,
				}).then(res => {
					if (res.flag) {
						this.$message.success("审核成功");
						this.getList();
					} else {
						this.$message.success("审核失败");
					}
				})
				this.cancelBox();
			});
		},
		aplay(flag, obj) {
			if (flag == "1") {
				this.$confirm('确定通过该项？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					authActivityLottery({
						recordId: obj.recordId,
						recordFlag: flag,
						rejectNote: '审核通过',
					}).then(res => {
						if (res.flag) {
							this.$message.success("审核成功");
							this.getList();
						} else {
							this.$message.success("审核失败，请联系客服：0431-81883497");
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消审核'
					});
				});
			} else if (flag == 2) {
				this.selectObj = obj
				this.addDisMemDialogVisible = true;
			} else if (flag == 3) {
				this.$confirm('是否已发放奖金？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					authActivityLottery({
						recordId: obj.recordId,
						recordFlag: flag,
					}).then(res => {
						if (res.flag) {
							this.$message.success("发放成功");
							this.getList();
						} else {
							this.$message.warning("发放失败");
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消发放'
					});
				});
			}

		},

		//每页N条发生改变
		sizeChange(val) {
			this.shopSize = val
			this.getList()
		},
		// 页码发生改变
		currentChange(val) {
			this.shopPage = val
			this.getList()
		},
	},
	created() {
		this.getList()
	}
}
</script>

<style>
.disNone {
	display: none;
}

.handle-btn {
	margin-top: 10px;
}

.mr10 {
	margin-right: 15px;
}
</style>
